<template>
  <div class="bgh">
    <div class="bgf fs18" style="text-align:center;padding:10px">购物车</div>
    <div v-if="this.cartlist.length>0">
      <div
        v-for="(item, index) in cartlist"
        :key="index"
        style="margin:10px 0;background:#fff"
        class="mui-input-row mui-checkbox mui-left bgf"
        data-numbox-min="0"
      >
        <div class="shop-list bgf">
          <img :src="item.imagepath" style="width:100px;height:100px" alt />
          <div style="width: 100%;padding-left:10px">
            <span style="line-height:25px" class="fs16">{{ item.itemname }}</span>
            <br />
            <div style="line-height:25px;color:#aaa">规格：{{ item.specsname }}</div>

            <span
              class="colc"
              style="display:inline-block;width:50%;text-align:left;padding-right:20px;line-height:30px;"
            >￥{{item.price}}</span>
            <div class="mui-numbox" data-numbox-min="0" data-numbox-max="3">
              <!-- "-"按钮，点击可减小当前数值 -->
              <button
                class="mui-btn mui-numbox-btn-minus"
                type="button"
                @click="goless(index,item)"
              >-</button>
              <input
                v-model="item.specssum"
                class="fs14"
                style="height:24px;padding:0;text-align:center"
                type="number"
                readonly
              />
              <!-- "+"按钮，点击可增大当前数值 -->
              <button class="mui-btn mui-numbox-btn-plus" type="button" @click="goadd(index,item)">+</button>
            </div>
            <span
              style="display: inline-block;position: absolute;right: 30px;top: 50px;
    color: #aaa;;text-decoration:underline"
              @click="godelete(item)"
            >删除</span>
          </div>
        </div>
        <input
          style="top:50px"
          name="checkbox1"
          :value="item.carid"
          type="checkbox"
          @click="checkevery(item,$event)"
        />
      </div>
    </div>
    <div
      v-else
      style="text-align: center;line-height: 30px;background: #fff;margin: 10px 0;"
    >暂无数据</div>
    <div style="height:35px;background:#fff"></div>
    <div class="cart-bottom" style="bottom: 50px;">
      <div class="mui-input-row mui-checkbox mui-left" style="display:inline-flex">
        <label style="padding-left:43px">全选</label>
        <input name="checkall" value="Item 1" type="checkbox" @click="checkall" />
      </div>

      <span style="display:inline-block;width:50%;text-align:right">合计:￥{{allmoney.toFixed(2)}}</span>

      <button
        style="border-radius:0;height:40px;border:none;background:rgb(0, 178, 163);color:#fff;float:right"
        @click="gopayfor"
      >去结算</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      cartlist: [],
      shopnumber: 0,
      allmoney: 0.0
    }
  },
  created() {
    mui('.mui-numbox').numbox()
    this.getcarlist()
  },
  methods: {
    //删除
    godelete(item) {
      var btnArray = ['取消', '确定']
      mui.confirm('是否确认删除该订单?', '提示', btnArray, e => {
        if (e.index == 1) {
          const req = {
            token: localStorage.getItem('token'),
            carid: item.carid
          }
          this.spost(this.ts, '/Carc/carDel', req).then(ts => {
            if (ts.d.flag == '200') {
              this.getcarlist()
              mui.toast('取消成功')
            }
          })
        }
      })
    },

    //减
    goless(index, item) {
      console.log(index, 'iiii')
      var ele = document.getElementsByName('checkbox1')
      console.log(ele[index].checked)
      const res = {
        token: localStorage.getItem('token'),
        carid: item.carid,
        type: 'subtract'
      }
      this.spost(this.ts, '/Carc/carUpNum', res).then(ts => {
        item.specssum -= 1
        if (item.specssum <= 1) {
          item.specssum = 1
        }
        if (ele[index].checked && item.specssum > 1) {
          this.allmoney -= Number(item.price)
        }
      })
    },
    //加
    goadd(index, item) {
      console.log(index, 'iiii')
      var ele = document.getElementsByName('checkbox1')
      const res = {
        token: localStorage.getItem('token'),
        carid: item.carid,
        type: 'add'
      }
      this.spost(this.ts, '/Carc/carUpNum', res).then(ts => {
        item.specssum += 1
        if (item.specssum >= item.num) {
          item.specssum = item.num
        }
        if (ele[index].checked && item.specssum < item.num) {
          this.allmoney += Number(item.price)
        }
      })
    },
    // allmoney(){
    //  var ele3 = document.getElementsByName('checkbox1')

    // },
    checkall() {
      var ele = document.getElementsByName('checkbox1')
      let ele2 = document.getElementsByName('checkall')
      console.log(ele, 'www')

      // if (ele2.checked) {
      //   for (let n = 0; n < ele.length; n++) {
      //     this.allmoney =
      //       Number(this.ele[i].price) * Number(this.ele[i].specssum)
      //   }
      // } else {
      //   this.allmoney = 0
      // }
      for (var i = 0; i < ele.length; i++) {
        ele[i].checked = true

        for (var j = 0; j < ele2.length; j++) {
          if (ele2[j].checked == false) {
            ele[i].checked = false
            this.allmoney = 0
          } else {
            this.allmoney = 0
            for (let m = 0; m < this.cartlist.length; m++) {
              this.allmoney +=
                // (parseFloat(this.cartlist[m].price)*this.cartlist[m].specssum).toFixed(2)
                //  parseFloat(Number(this.cartlist[m].price) *
                //   this.cartlist[m].specssum).
                Number(this.cartlist[m].price) *
                Number(this.cartlist[m].specssum)
            }
          }
        }
      }
    },
    //获取总计金额
    checkevery(item, event) {
      console.log(event.target.checked, '554')
      if (event.target.checked) {
        this.allmoney += Number(item.price) * Number(item.specssum)
      } else {
        this.allmoney -= Number(item.price) * Number(item.specssum)
      }

      // this.allmoney =0
      // var ele = document.getElementsByName('checkbox1')
      // for (let k = 0; k < ele.length; k++) {
      //   if (ele[k].checked==true) {
      //     this.allmoney += Number(item.price) * Number(item.specssum)

      //   }else{
      //     this.allmoney -= Number(item.price) * Number(item.specssum)
      //   }
      // }
    },
    getval() {
      var ele = document.getElementsByName('checkbox1')
      for (var i = 0; i < ele.length; i++) {
        console.log(ele[i].value, ele[i].checked)
      }
    },
    //获取购物车列表
    getcarlist() {
      const res = {
        token: localStorage.getItem('token')
      }
      this.spost(this.ts, '/Carc/carList', res).then(ts => {
        if (ts.d.flag == '200') {
          console.log(ts.d.data, '555')
          this.cartlist = ts.d.data
          console.log(this.cartlist.length)
        }
      })
    },
    gopayfor() {
      var ele = document.getElementsByName('checkbox1')
      let arruy = []
      for (var i = 0; i < ele.length; i++) {
        console.log(ele[i].value, ele[i].checked)
        if (ele[i].checked) {
          arruy.push(ele[i].value)
        }
      }
      if (arruy.length == 0) {
        mui.toast('请选择要结算的商品！')
      } else {
        this.$router.push({
          name: 'shopcarddetail',
          query: {
            from: '购物车',
            word: '填写信息',
            carid: arruy.join(',')
          }
        })
      }
    }
  },
  mounted() {
    // mui('.mui-numbox').numbox().setValue(5)
  }
}
</script>

<style scope>
.shop-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px 0px 50px;
  margin: 10px 0;
}
.cart-bottom {
  position: fixed;
  background: #fff;

  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
</style>
